<template>
  <header>
    <div class="logo-box">
      <img src="@/assets/image/logo-1.png" alt="">
    </div>
    <nav>
      <div :class="activeTab == item.url ? 'home-tab': ''" v-for="(item,index) in tabList" :key="index" @click="increment(item)"><RouterLink :to="item.url">{{ item.name }}</RouterLink></div>
    </nav>
  </header>

  <main>
    <RouterView />
  </main>

  <footer>
    <div class="footer-l">
      <div class="footer-l-title"><span>菁商会</span>  |  环球商务精准对接平台（社交人脉/生意引荐） </div>
      <div class="footer-l-address msg-box">地址：广州市越秀区花园酒店花园大厦618室</div>
      <div class="footer-l-phone msg-box">
        <div class="phone-1">电话：020-2818 5222  </div>
        <div class="phone-2">手机：13711195558   Jason </div>
      </div>
      <div class="footer-l-emil msg-box">邮箱：ebc1688@126.com</div>
      <div class="footer-l-img">
        <div class="img-box">
          <img src="@/assets/image/gzh-img.png" alt="">
          <div>公众号</div>
        </div>
        <div class="img-box">
          <img src="@/assets/image/xcx-img.png" alt="">
          <div>AI智能名片社交</div>
        </div>
        <div class="img-box">
          <img src="@/assets/image/ewm-img.png" alt="">
          <div>在线服务</div>
        </div>
      </div>
    </div>
    <div class="footer-r">
      <div class="meau-box server-box">
        <div class="meau-box-title">服务</div>
        <div class="meau-box-cont flex-cont">
          <div class="cont-item" v-for="(item,index) in serverList" :key="index">{{ item.name }}</div>
        </div>
      </div>
      <div class="meau-box other-box">
        <div class="meau-box-title">公益</div>
        <div class="meau-box-cont">
          <div class="cont-item" v-for="(item,index) in benefitList" :key="index">{{ item.name }}</div>
          <img src="@/assets/image/huizhang-img.png" alt="">
        </div>
      </div>
      <div class="meau-box other-box">
        <div class="meau-box-title">网络</div>
        <div class="meau-box-cont">
          <div class="cont-item" v-for="(item,index) in netWordList" :key="index">{{ item.name }}</div>
          <div class="cont-item">更多······</div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { RouterLink, RouterView, useRoute  } from "vue-router";
import { reactive,ref, onMounted   } from 'vue'
const tabList = reactive([
  {
    name:'首页',
    url:'/'
  },
  {
    name:'走进菁商会',
    url:'/introduce'
  },
  {
    name:'各地分会',
    url:''
  },
  {
    name:'公益基金',
    url:''
  },
  {
    name:'创办分会',
    url:''
  },
  {
    name:'联系我们',
    url:''
  }
])
const serverList = reactive([
  {
    name:'在线捐助',
    url:''
  },
  {
    name:'我要入会',
    url:''
  },
  {
    name:'各地分会',
    url:''
  },
  {
    name:'我要参会',
    url:''
  },
  {
    name:'AI名片社交',
    url:''
  },
  {
    name:'我要创会',
    url:''
  },
  {
    name:'商务活动',
    url:''
  },
  {
    name:'菁商学院',
    url:''
  },
  {
    name:'图片展示',
    url:''
  },
  {
    name:'奖励基金',
    url:''
  },
  {
    name:'菁商社群',
    url:''
  },

])
const benefitList = reactive([
  {
    name:'在线捐助',
    url:''
  },
  {
    name:'资金结余',
    url:''
  },
  {
    name:'收支公示',
    url:''
  },
])
const netWordList = reactive([
  {
    name:'美国',
    url:''
  },
  {
    name:'欧洲',
    url:''
  },
  {
    name:'澳洲',
    url:''
  },
  {
    name:'新加坡',
    url:''
  },
  {
    name:'马来西亚',
    url:''
  },
  {
    name:'中东',
    url:''
  },
])
const activeTab = ref('/')
function increment(item) {
  console.log(item,'item',item.url)
  activeTab.value = item.url
  console.log(activeTab,'activeTab')
}
// onMounted(() => {
//   const route = useRoute();
//   const currentPath = route.path;
//   console.log(currentPath,'currentPath',route.path)
// })

</script>

<style scoped lang="scss">
header {
  height: 60px;
  width: 100%;
  background-color: rgba(255,0,0,1);
  display: flex;
  align-items: center;
}
main {
  min-height: calc(100vh - 60px - 434px);
}
footer {
  width: 100%;
  height: 399px;
  background-color: #A23239;
  display: flex;
  padding: 45px 0 56px 0;
  .footer-l,.footer-r {
    width: 50%;
  }
  .footer-l {
    border-right: 1px solid rgba(255,255,255,1);
    padding-left: 170px;
    padding-right: 52px;
    .msg-box {
      color: rgba(255,255,255,1);
      font-size: 14px;
    }
    &-title {
      color: rgba(255,255,255,1);
      font-size: 20px;
      span {
        font-size: 28px;
      }
    }
    &-phone {
      display: flex;
      div {
        width: 50%;
        display: flex;
        align-items: center;
      }
    }
    &-img {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24px;
      .img-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        img {
          width: 118px;
          height: 118px;
          margin-bottom: 7px;
        }
      }
    }
  }
  .footer-r {
    padding-left: 66px;
    display: flex;
    .server-box {
      width: 35%;
    }
    .other-box {
      width: 25%;
    }
    .meau-box {
      .meau-box-title {
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .flex-cont {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .meau-box-cont {
        .cont-item {
          width: 50%;
          font-size: 14px;
          color: #fff;
          margin-bottom: 14px;
          cursor: pointer;
        }
        img {
          width: 96px;
          height: 96px;
        }
      }
    }
  }
}
.logo-box {
  width: 434px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    height: 100%;
  }
}
nav {
  display: flex;
  align-items: center;
  height: 100%;
  div {
    width: 120px;
    height: 100%;
    a {
      width: 100%;
      height: 100%;
      font-size: 16px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .home-tab {
    background-color: #000000;
  }
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
